<template>
    <div class="login_bg">
        <div class="fixed_sm">copyright ©2020 OIOI 版权所有</div>
        <div class="bg1 clearfix">
            <div class="left"><img src="@/assets/image/admin/login/bg_left.png"></div>
            <div class="right">
                <div class="login_main">
                    <div class="t1">{{title}}</div>
                    <div class="t2">聚合数据，统计分析</div>
                    <!-- 账号 -->
                    <div class="login_form">
                        <input v-model="account" @keyup.enter="handleLogin" type="text" placeholder="请输入账号"/>
                    </div>
                    <!-- 密码 -->
                    <div class="login_form login_form2">
                        <input v-model="password" @keyup.enter="handleLogin" type="password" placeholder="请输入密码"/>
                        <!-- <div class="fsyzm">发送验证码</div> -->
                    </div>
                    <!-- 密码 -->
                    <div class="login_form login_form3">
                        <input v-model="inputCode" @keyup.enter="handleLogin" type="text" placeholder="输入图片验证码"/>
                        <div @click="updateCode">
                            <MiCaptcha class="tpyzm" :identifyCode="showCode"/>
                        </div>
                    </div>
                    <!-- 登录 -->
                    <div class="login_submit" @click="handleLogin">
                        <a class="login_btn">登录</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Watch} from 'vue-property-decorator'
    import {Route} from 'vue-router'
    import {API} from "@/core/api/API";
    import MiCaptcha from "@/components/Captcha/MiCaptcha.vue";
    import {errorMsg, warningMsg} from "@/core/utils/message";
    import $http from "@/core/utils/http";
    import {mixins} from "vue-class-component";
    import BaseVue from "@/core/mixin/BaseVue";
    import Kit from "@/core/mixin/Kit";
    import {Dictionary} from "vue-router/types/router";
    import settings from "@/core/config/settings";
    import {
        setMenus,
        setMenusPath,
        setRefreshToken,
        setResources,
        setRoleInfo,
        setToken,
        setUserInfo
    } from "@/core/utils/storage";
    import {TagsViewModule} from "@/core/store/modules/tags-view";
    import {arrangeMenu, md5, tree} from "@/core/utils/Utils";


    @Component({
        name: 'Login',
        components: {MiCaptcha}
    })
    export default class Login extends mixins(BaseVue, Kit) {
        title = settings.title;
        showCode = "";

        // account = "admin";
        // password = "1234qwer";
        account = "";
        password = "";
        inputCode = "";

        mounted() {
            this.updateCode();
            // this.inputCode = this.showCode;
        }

        activated() {
            this.updateCode();
        }

        updateCode() {
            let random = Math.random() + "";
            this.showCode = random.substr(2, 4);
        }

        handleLogin() {
            if (this.check()) {
                let password = md5(this.account + this.password).toUpperCase();
                $http.post(API.sysUserLogin, {account: this.account, password: password})
                    .then((res: any) => {
                        if (res.success) {
                            this.account = "";
                            this.password = "";

                            //缓存身份令牌
                            setToken(res.data.token);
                            //缓存刷新凭证
                            setRefreshToken(res.data.refreshToken);
                            //缓存用户信息
                            setUserInfo(res.data.userInfo);
                            //角缓存色信息
                            setRoleInfo(res.data.roleInfo);
                            //缓存资源
                            setResources(res.data.roleResources);

                            //处理路由
                            let menuObj: any = arrangeMenu(res.data.roleMenus);
                            //缓存路由Path
                            setMenusPath(menuObj.menusPath);
                            //缓存路由对象
                            setMenus(tree(menuObj.mMenus));

                            //清除视图缓存
                            TagsViewModule.delAllCachedViews();
                            TagsViewModule.delAllViews();

                            //跳转路由
                            this.$router.push({path: this.redirect || '/', query: this.otherQuery});
                            return;
                        }
                        this.inputCode = "";
                        this.updateCode();
                    });
            }
        }

        check() {
            if (!this.account || this.account.length <= 0) {
                warningMsg("请输入账号");
                return false;
            }
            if (!this.password || this.password.length <= 0) {
                warningMsg("请输入密码");
                return false;
            }
            if (!this.inputCode || this.inputCode.length <= 0) {
                warningMsg("请输入验证码");
                return false;

            }
            if (this.account.length < 5) {
                errorMsg("账号输入错误");
                return false;
            }
            if (this.password.length < 5) {
                errorMsg("密码输入错误");
                return false;

            }
            if (this.inputCode != this.showCode) {
                errorMsg("验证码输入错误");
                return false;
            }
            return true;
        }

        private redirect?: string;
        private otherQuery: Dictionary<string> = {};

        @Watch('$route', {immediate: true})
        private onRouteChange(route: Route) {
            const query = route.query as Dictionary<string>;
            if (query) {
                this.redirect = query.redirect;
                this.otherQuery = this.getOtherQuery(query);
            }
        }

        private getOtherQuery(query: Dictionary<string>) {
            return Object.keys(query).reduce((acc, cur) => {
                if (cur !== 'redirect') {
                    acc[cur] = query[cur]
                }
                return acc
            }, {} as Dictionary<string>)
        }


    }
</script>

<style scoped lang="scss">
    /* 解决安卓图片可点击问题 */
    * {
        padding: 0;
        margin: 0;
        -webkit-font-smoothing: antialiased;
        font-family: "Microsoft YaHei", "PingFangSC", sans-serif;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        word-break: break-word;
        word-break: break-all;
        /*英文不溢出*/
        font-size: 14px;
    }

    input:focus {
        outline: none;
    }

    input,
    textarea,
    button {
        border: none;
        background: none;
        outline: none;
        -webkit-appearance: none;
    }

    img {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        border: none;
        display: block;
        pointer-events: none;
        max-width: 100%;
    }

    .left {
        display: block;
        float: left;
    }

    .right {
        display: block;
        float: right;
    }

    .clearfix:before,
    .clearfix:after {
        content: " ";
        display: table;
    }

    .clearfix:after {
        clear: both;
    }

    /* 登录 */
    .fixed_sm {
        position: fixed;
        bottom: 10px;
        width: 100%;
        text-align: center;
        padding: 5px 10px;
        color: #fff;
    }

    .login_bg {
        width: 100%;
        height: 100vh;
        background: url(../../assets/image/admin/login/bg.jpg) center no-repeat;
        background-size: cover;
    }

    .bg1 {
        width: 70%;
        max-width: 1000px;
        height: 600px;
        background: #fff;
        border-radius: 15px;
        position: absolute;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;
    }

    .bg1 .left,
    .bg1 .right {
        width: 50%;
        height: 100%;
        position: relative;
    }

    .bg1 .left img {
        width: 80%;
        position: absolute;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;
    }

    .bg1 .right {
        padding: 0 30px;
    }

    .login_main {
        position: relative;
        width: 100%;
        padding: 30px 20px;
        margin: auto;
        z-index: 2;
    }

    .login_form {
        padding: 15px 20px;
        padding-left: 50px;
        background: url(../../assets/image/admin/login/login_icon1.png) no-repeat 16px center;
        background-size: 16px;
        margin-bottom: 20px;
        border: 1px solid #eee;
        border-radius: 100px;
        position: relative;
    }

    .login_form2 {
        background: url(../../assets/image/admin/login/login_icon2.png) no-repeat 16px center;
        background-size: 16px;
    }

    .login_form3 {
        background: url(../../assets/image/admin/login/login_icon3.png) no-repeat 16px center;
        background-size: 20px;
    }

    .login_form input {
        width: 70%;
    }

    .login_form input::-webkit-input-placeholder {
        color: #ccc;
    }

    .login_submit {
        padding-top: 30px;
    }

    .login_submit .login_btn {
        display: block;
        background: #1395E7;
        color: #fff;
        width: 100%;
        font-size: 16px;
        text-align: center;
        border-radius: 100px;
        padding: 15px 0;
    }

    .t1 {
        color: #333;
        font-size: 30px;
        font-weight: 400;
        margin-top: 30px;
    }

    .t2 {
        color: #a9a9a9;
        font-size: 16px;
        font-weight: 400;
        margin: 10px 0;
        margin-bottom: 30px;
    }

    .fsyzm {
        color: #1395E7;
        position: absolute;
        right: 0px;
        top: 0px;
        line-height: 52px;
        padding-right: 25px;
        cursor: pointer;
    }

    .tpyzm {
        position: absolute;
        right: 0px;
        top: 0px;
        background: #eee;
        height: 100%;
        width: 120px;
        cursor: pointer;
        border-bottom-right-radius: 25px;
        border-top-right-radius: 25px;
        overflow: hidden;
    }

    @media (max-width: 768px) {

        .fixed_sm,
        .person_left,
        .bg1 .left {
            display: none;
        }

        .bg1 {
            width: 90%;
            height: 500px;
        }

        .t1 {
            font-size: 20px;
            margin-top: 10px;
        }

        .t2 {
            font-size: 14px;
        }

        .bg1 .right {
            width: 100%;
            float: inherit;
            padding: 0;
        }
    }

</style>
